<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div>
    <span class="msg">
    <input type="text"/>
</span>
<span class="btn">
    <button>搜索</button>
</span>
    <ul>
    </ul>
</div>




<script>
    document.getElementsByTagName("button")[0].onclick=function(){
        var v1=document.getElementsByTagName("input")[0].value;
//        console.log(v1)
//        1、借助script的src进行访问
        var sc=document.createElement("script");
//        src------设置的是跨域请求地址
        sc.src="http://suggest.taobao.com/sug?code=utf-8&q="+v1+"&callback=fn";
//        把script添加到页面上
        document.body.appendChild(sc);
    }
    //    设置回调函数，把服务器返回的数据取出
    function fn(data){
        console.log(data);
//        把数据渲染到也面上
        var arrs=data.result;
//        console.log(arrs);
        createEle(data.result);
    }
    //    把动态创建抽离

    function createEle(arrs){
        var ulEle=document.getElementsByTagName("ul")[0];
//        先清除原本的内容再添加
        var lis=document.getElementsByTagName("li");
        if(lis.length>1){
            ulEle.innerHTML="";

        }

//        遍历数组过程中动态创建LI'
        for(var index in arrs){
            var liEle=document.createElement("li");
            var txt=document.createTextNode(arrs[index][0]);
            liEle.appendChild(txt);
            ulEle.appendChild(liEle);
        }
    }


</script>
</body>
</html>